<!DOCTYPE html>
<html lang="en-US" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>SheetJS - Home</title>
		<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
		<meta name='HandheldFriendly' content='true'>
		<meta name='apple-mobile-web-app-capable' content='yes'>
		<meta name='apple-mobile-web-app-status-bar-style' content='black'>
		<meta name='description' content='SheetJS Tools for Excel Spreadsheets'>
		<meta name='keywords' content='sheetjs excel spreadsheet data table javascript'>
		<meta property='og:type' content='website'>
		<meta property='og:title' content='SheetJS'>
		<meta property='og:image' content='https://sheetjs.com/sketch256.png'>
		<meta property='og:url' content='https://sheetjs.com/'>
		<meta property='og:description' content='SheetJS Tools for Excel Spreadsheets'>
		<meta name='twitter:card' content='summary'>
		<meta name='twitter:site' content='@SheetJS'>
		<meta name='twitter:title' content='SheetJS'>
		<meta name='twitter:description' content='SheetJS Tools for Excel Spreadsheets'>
		<meta name='twitter:image' content='https://sheetjs.com/sketch256.png'>
		<link rel='manifest' href='manifest.webmanifest'>
		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="favico/ios-57x57.png" />
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favico/ios-114x114.png" />
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favico/ios-72x72.png" />
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favico/ios-144x144.png" />
		<link rel="apple-touch-icon-precomposed" sizes="60x60" href="favico/ios-60x60.png" />
		<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favico/ios-120x120.png" />
		<link rel="apple-touch-icon-precomposed" sizes="76x76" href="favico/ios-76x76.png" />
		<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favico/ios-152x152.png" />
		<link rel="icon" type="image/png" href="favico/favicon-196x196.png" sizes="196x196" />
		<link rel="icon" type="image/png" href="favico/favicon-96x96.png" sizes="96x96" />
		<link rel="icon" type="image/png" href="favico/favicon-32x32.png" sizes="32x32" />
		<link rel="icon" type="image/png" href="favico/favicon-16x16.png" sizes="16x16" />
		<link rel="icon" type="image/png" href="favico/favicon-128.png" sizes="128x128" />
		<meta name="application-name" content="SheetJS"/>
		<meta name="theme-color" content="#ffffff">
		<meta name="msapplication-TileColor" content="#FFFFFF" />
		<meta name="msapplication-TileImage" content="favico/mstile-144x144.png" />
		<meta name="msapplication-square70x70logo" content="favico/mstile-70x70.png" />
		<meta name="msapplication-square150x150logo" content="favico/mstile-150x150.png" />
		<meta name="msapplication-wide310x150logo" content="favico/mstile-310x150.png" />
		<meta name="msapplication-square310x310logo" content="favico/mstile-310x310.png" />
		<style>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html, body {
	width: 100vw;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	-webkit-font-smoothing: antialiased;
	background: white;
	color: black;
}

body {
	padding-top: 50px;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 50px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	z-index: 10;
	background: white;
	user-select: none;
	box-shadow: 0 -5px 15px 0 #ced4da;
	user-select: none;
}

.header-item {
	font-weight: bold;
	color: black;
	opacity: 0.45;
	cursor: pointer;
	margin-right: 20px;
	padding: 10px;
	text-decoration: none;
}

.header-item:first-child {
	margin-left: 20px;
}

.header-item:hover {
	opacity: 0.6;
}

.active {
	opacity: 1;
}

.page {
	position: relative;
	width: 100vw;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	text-align: center;
	padding: 20px;
}

.space {
	width: 100%;
	height: 10px;
}

.divider {
	width: 200px;
	height: 0px;
	border-bottom: 1px solid black;
}

.title {
	font-size: 24px;
	font-weight: bold;
}

.subtitle {
	font-style: italic;
}

.text {
	color: #181818;
}

.button {
	min-width: 140px;
	height: 40px;
	border: 1px solid black;
	padding: 10px;
	font-size: 14px;
	background: white;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: black;
	user-select: none;
	background: rgba(89, 201, 213, 0.25);
	border-radius: 20px;
	display: inline-block;
}

.container {
	max-width: 840px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
}

.container-item {
	width: 280px;
}
		</style>
	</head>
	<body>
		<div id='header' class='header'>
			<div class='header-item active'>Home</div>
			<a class='header-item' href='/demo'>Demos</a>
			<a class='header-item' href='/pro'>Pro</a>
			<a class='header-item' href='/support'>Support</a>
			<a class='header-item' href='/careers'>Careers</a>
			<a class='header-item' href='/privacy'>Privacy</a>
		</div>
		<div class='page'>
			<img alt='SheetJS Logo' src='/sketch128.png' width='128px' height='128px'>
			<div class='space'></div>
			<div class='title'>SheetJS</div>
			<div class='subtitle'>Spreadsheets simplified</div>
			<div class='text'>Read, edit, and export spreadsheets</div>
			<div class='text'>Works in web browsers and servers</div>
			<div class='text'>Trusted by Microsoft in Office 365</div>
			<div class='space'></div>
			<div class='space'></div>
			<div class='divider'></div>
			<div class='space'></div>
			<div class='space'></div>
			<div class='container'>
				<div class='container-item'>
					<div><b>Professional Edition</b></div>
					<div class='text'>Powerful features</div>
					<div class='text'>Broad compatibility</div>
					<div class='text'>Priority support</div>
					<div class='space'></div>
					<a class='button' href='/pro'>SheetJS Pro</a>
					<div class='space'></div>
					<div class='space'></div>
				</div>
				<div class='container-item'>
					<div><b>Common Use Cases</b></div>
					<div class='text'>Reliable data imports</div>
					<div class='text'>Professional reports</div>
					<div class='text'>Edit spreadsheet files</div>
					<div class='space'></div>
					<a class='button' href='/demo'>Live Demos</a>
					<div class='space'></div>
					<div class='space'></div>
				</div>
				<div class='container-item'>
					<div><b>Community Edition</b></div>
					<div class='text'>Open source</div>
					<div class='text'>Requires attribution</div>
					<div class='text'>Community assistance</div>
					<div class='space'></div>
					<a class='button' href='https://github.com/sheetjs/sheetjs' target='_blank' rel="noopener">SheetJS GitHub</a>
					<div class='space'></div>
					<div class='space'></div>
				</div>
			</div>
		</div>
		<script type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "Organization",
	"url": "https://sheetjs.com",
	"logo": "https://sheetjs.com/sketch1024.png"
}
		</script>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-36810333-1']);
			_gaq.push(['_setDomainName', 'sheetjs.com']);
			_gaq.push(['_setAllowLinker', true]);
			_gaq.push(['_trackPageview']);
			(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</body>
</html>
